<template>
  <div class="container">
    <el-card>
      <div class="title">
        <span>试题录入</span>
        <el-divider></el-divider>
      </div>
      <div class="body">
        <el-form
          ref="form"
          :rules="rules"
          :model="formData"
          label-width="100px"
          class='form'
        >
          <el-form-item label="学科：" prop="subjectID">
            <el-select
              placeholder="请选择活动区域"
              v-model="formData.subjectID"
              @change="getDirectorys"
            >
              <el-option
                v-for="item in SubjectSimpleList"
                :key="item.label"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录：" prop="subjectID">
            <el-select
              placeholder="请选择活动区域"
              v-model="formData.catalogID"
            >
              <el-option
                v-for="item in directorysSimpleList"
                :key="item.label"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="企业：" prop="enterpriseID">
            <el-select
              placeholder="请选择活动区域"
              v-model="formData.enterpriseID"
            >
              <el-option
                v-for="item in companysList"
                :key="item.id"
                :label="item.company"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="城市：" prop="province">
            <el-col :span="5">
              <el-form-item prop="province">
                <el-select
                  placeholder="请选择活动区域"
                  class="city"
                  v-model="formData.province"
                  @change="handleProvince"
                >
                  <el-option
                    v-for="item in citySelect.province"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="1" class="line">
              <el-form-item prop="city">
                <el-select
                  placeholder="请选择活动区域"
                  class="city"
                  v-model="formData.city"
                >
                  <el-option
                    v-for="item in citySelect.cityDate"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="方向：" prop="direction">
            <el-select
              placeholder="请选择活动区域"
              v-model="formData.direction"
            >
              <el-option
                v-for="(item, i) of directionList"
                :key="i"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="题型：" prop="questionType">
            <el-radio-group v-model="formData.questionType" @change='radioChange'>
              <el-radio label="1">单选</el-radio>
              <el-radio label="2">多选</el-radio>
              <el-radio label="3">简答</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="难度：" prop="difficulty">
            <el-radio-group v-model="formData.difficulty">
              <el-radio label="1">简单</el-radio>
              <el-radio label="2">一般</el-radio>
              <el-radio label="3">困难</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="题干：" prop="question">
            <quill-editor
              v-model="formData.question"
              ref="myQuillEditor"
              :options="editorOption"
            >
            </quill-editor>
          </el-form-item>
          <el-form-item label="选项：" v-if="formData.questionType !== '3'">
            <el-radio-group
              v-if="formData.questionType === '1'"
              v-model="radio"
              @change='radioValue'
            >
              <div class="radio" v-for="(item, i) in formData.options" :key="i">
                <el-radio :label="item.code">{{ item.code }}：</el-radio>
                <span>
                  <el-input
                    v-model="item.title"
                    style="width: 300px"
                  ></el-input>
                </span>
                <div class="upload">
                  <el-upload
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="(response,file,fileList)=>{return uploadSucess(response,file,fileList, item)}"
                  >
                    <img v-if="item.img" :src="item.img" class="avatar" />
                    <span v-else class="imgText">上传图片</span>
                    <i class="el-icon-plus el-icon-circle-close"></i>
                  </el-upload>
                </div>
              </div>
              <el-button disabled type="danger" size="mini"
                >+增加选项与答案</el-button
              >
            </el-radio-group>
            <el-checkbox-group
              v-model="code"
              v-if="formData.questionType === '2'"
              @change='checkboxValue'
            >
              <div class="radio" v-for="(item, i) in formData.options" :key="i">
                <el-checkbox :label="item.code"
                  >{{ item.code }}：
                  <span>
                    <el-input
                      v-model="formData.options.title"
                      style="width: 300px"
                    ></el-input>
                  </span>
                  <el-upload
                    class="avatar-uploader"
                    action="http://localhost:7001/"
                    :show-file-list="false"
                    :on-success="(response,file,fileList)=>{return uploadSucess(response,file,fileList, item)}"
                  >
                    <img v-if="item.img" :src="item.img" class="avatar" />
                    <span v-else class="imgText">上传图片</span>
                    <i class="el-icon-plus el-icon-circle-close"></i>
                  </el-upload>
                </el-checkbox>
              </div>
              <el-button type="danger" size="mini" @click='checkboxAddBtn'
                >+增加选项与答案</el-button
              >
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="解析视频：">
            <el-input
              style="width: 400px"
              v-model="formData.videoURL"
            ></el-input>
          </el-form-item>
          <el-form-item label="答案解析：" prop="answer">
            <quill-editor
              v-model="formData.answer"
              ref="myQuillEditor"
              :options="editorOption"
            >
            </quill-editor>
          </el-form-item>
          <el-form-item label="题目备注：">
            <el-input
              type="textarea"
              :rows="4"
              placeholder="请输入内容"
              style="width: 400px"
              v-model="formData.remarks"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="试题标签：">
            <el-select
              placeholder="请选择活动区域"
              v-model="formData.tags"
              multiple
              filterable
              allow-create
            >
              <el-option
                v-for="(item, i) in tagList"
                :key="i"
                :label="item.label"
                :value="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button v-if='!this.$route.query.id' type="primary" @click="onSubmit">确认提交</el-button>
            <el-button v-else type="primary" @click="onSubmit">确认修改</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script src='./js/questions-new.js'>
</script>

<style lang='less' src='./style/questions-new.less'>
</style>
